<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keyword" content="ONE,GO物,网上购物,交易市场,网上交易">
    <meta name="description" content="ONE-GO物，平价线上交易平台，提供各类商品交易，让大家都可以享受购物的乐趣和真正品质购物">
    <title>ONE - GO物</title>
    <link rel="shortcut icon" href="/static/images/logo_i.png">
    <!--引入layui css样式-->
    <link rel="stylesheet" href="/static/layui-v2.6.7/layui/css/layui.css">
    <!--引入layui js脚本-->
    <script src="/static/layui-v2.6.7/layui/layui.js"></script>
    <script src="/static/js/user.js"></script>
    <link rel="stylesheet" href="/static/css/index.css">
    <style type="text/css">
        .product-info {
            display: flex;
            justify-content: space-between;
        }

        .product-info .infoimg {
            padding: 0 20px 30px 0;
            position: relative;
            width: 400px;
        }

        .product-info .infoimg img {
            display: block;
            height: 400px;
            width: 400px;
        }

        .product-info .allImg {
            height: 58px;
            margin: 15px 0 0 10px;
            overflow: hidden;
            width: 310px;
        }

        .product-info .allImg img {
            cursor: pointer;
            float: left;
            height: 54px;
            margin-right: 3px;
            border: 2px solid white;
            width: 54px;
        }

        .product-info .allImg img.current {
            border: 2px solid #FF5722;
        }

        .product-info .mainImg {
            position: relative;
        }

        .product-info .mainImg .zoom_pup {
            cursor: move;
            height: 175px;
            left: 0px;
            position: absolute;
            top: 160px;
            width: 175px;
            background-color: #FFB800;
            opacity: 0.0;
        }

        .product-info .big_pic {
            background-color: #fff;
            border: 1px solid #f5f5f5;
            height: 400px;
            left: 420px;
            overflow: hidden;
            position: absolute;
            text-align: center;
            top: 0;
            width: 400px;
            display: none;
        }

        .product-info .big_pic img {
            width: 800px;
            height: 800px;
        }

        .product-info .product-option {
            width: 720px;
        }

        .product-info .product-option h3 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .product-info .product-option .product-meta {
            margin-top: 10px;
            height: 35px;
            padding: 10px;
            background-color: #FFF2E8;
            display: flex;
            align-items: center;
        }

        .product-info .product-option .product-num {
            margin: 10px 0px;
            height: 35px;
            padding: 10px;
        }

        .product-info .product-option .by-num {
            width: 60px;
            line-height: 35px;
            margin-right: 10px;
            text-align: center;
        }

        .product-info .product-option .product-btn button {
            height: 38px;
            font-size: 16px;
        }

        .product-info .product-option .product-btn .shopping-btn {
            width: 134px;
        }

        .product-info .product-option .product-btn .shopping-car-btn {
            width: 180px;
        }

        .product-info .product-option .product-name {
            width: 80px;
            display: inline-block;
        }

        .product-info .product-option .product-meta .product-price {
            font-size: 24px;
            color: rgb(255, 68, 0);
            font-weight: 700;
            font-style: normal;
        }

        .product-info .product-option .option-item li {
            height: 35px;
            padding: 10px;
            display: flex;
            align-items: center;
        }

        .product-info .product-option .option-item .options {
            display: inline-block;
        }

        .product-info .product-option .option-item .options li {
            display: inline-block;
            padding: 0px 10px;
            line-height: 35px;
            border: 2px solid #DCDCDC;
            cursor: pointer;
            margin-right: 10px;
        }

        .product-info .product-option .option-item .options .pitch {
            border: 2px solid #FF5722;
        }

        .product-info .product-option .option-item .options li img {
            height: 34px;
        }

        .product-detail .detail-img {
            text-align: center;
        }
    </style>
</head>
<body>
<!--头部 start-->
<div class="header">
    <div class="layui-header layui-bg-red">
        <div class="layui-container header-content">
            <!--logo start-->
            <a class="layui-logo logo-box" href="/static/index.html">
                <img src="/static/images/logo_w.png" alt="ONE-GO物" class="logo">
                <h2>ONE-GO物</h2>
            </a>
            <!--logo end-->

            <!--search start-->
            <div class="search">
                <div class="search-box">
                    <input type="search" class="search-input" placeholder="请输入你要搜索的宝贝" required autocomplete="off"
                           name="q">
                    <button class="search-btn">搜索</button>
                </div>
                <ul class="search-item"></ul>
            </div>
            <!--search end-->

            <!--用户信息 start-->
            <ul class="layui-nav user-box layui-bg-red" lay-bar="disabled">
                <li class="layui-nav-item">
                    <a href="" class="layui-icon layui-icon-cart">购物车<span class="layui-badge layui-bg-orange">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="/static/page/user/order.html">全部订单<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item" id="user_info" lay-unselect="">
                    <a href="javascript:;"><img src="/static/images/logo_w.png" class="layui-nav-img"
                                                id="portrait_s"><span
                            id="nickname"></span></a>
                    <dl class="layui-nav-child">
                        <dd><a href="/static/page/user/info.html">个人信息</a></dd>
                        <dd><a href="javascript:;">足迹</a></dd>
                        <hr>
                        <dd><a href="javascript:logout();">退出</a></dd>
                    </dl>
                </li>
            </ul>
            <!--用户信息 end-->
        </div>
    </div>
</div>
<!--头部 end-->

<div class="content">
    <div class="layui-container">
        <!--商品信息 start-->
        <div class="product-info">
            <!--商品图片 start-->
            <div class="infoimg" id="infoimg">

            </div>
            <!--商品图片 end-->

            <!--商品选择 start-->
            <div class="product-option">
                <h3 id="product-title"></h3>
                <h4 id="product-subtitle"></h4>
                <div class="product-meta">
                    <span class="product-name">价格</span>
                    <em class="product-price">￥398.00</em>
                </div>
                <ul class="option-item" id="option-item">

                </ul>
                <div class="product-num">
                    <span class="product-name">数量</span>
                    <span>
                        <input type="number" value="1" class="by-num">件（库存<span class="inventory">2</span>件）
                    </span>
                </div>
                <div class="product-btn">
                    <button class="layui-btn layui-btn-warm shopping-btn">立即购物</button>
                    <button class="layui-btn layui-btn-danger shopping-car-btn">
                        <i class="layui-icon layui-icon-cart"></i>
                        加入购物车
                    </button>
                </div>
            </div>
            <!--商品选择 end-->
        </div>
        <!--商品信息 end-->

        <!--商品详情 start-->
        <div class="product-detail">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">宝贝详情</li>
                    <li>评论</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="detail-img" id="detail-img">
                        </div>
                    </div>
                    <div class="layui-tab-item">2</div>
                </div>
            </div>

        </div>
        <!--商品详情 end-->
    </div>
</div>

<!--尾部 start-->
<div class="footer">
    <div class="layui-container">
        <p>2021 - 现在 yige@yige.com 版权所有</p>
    </div>
</div>
<!--尾部 end-->

<script>
    let merchandise_options = {}
    let price_id = null
    let price_show = null
    let change_option = null
    let inventory_show = '无限'
    layui.use(['layer', 'form', 'carousel', 'jquery', 'element'], function () {

        change_option = function (name, id, price, inventory, options) {
            if (price) {
                price_show = price
                price_id = id
            }
            if (inventory) {
                inventory_show = inventory
            }

            $(`#option${id}`).parent().children().css('border', '2px solid white')
            $(`#option${id}`).css('border', '2px solid red')
            merchandise_options[name] = {
                'id': id,
                'price': price,
                'inventory': inventory,
                'options': options
            }
            $('.product-price').text('￥' + price_show)
            $('.inventory').text(inventory_show)
            // console.log(merchandise_options)
        }

        var layer = layui.layer
            , form = layui.form
            , carousel = layui.carousel
            , $ = layui.$
            , element = layui.element;

        $.ajax({
            type: "GET",
            url: "/user/info/",
            headers: {
                'Authorization': localStorage.getItem('Authorization')
            },
            success: function (data) {
                let code = data.code
                if (code != 200) {
                    $('#user_info').html('<a href="/static/page/user/login.html">前往登陆</a>')
                } else {
                    let user = data.data
                    let nickname = data.data.email
                    if (user.detail) {
                        let detail = user.detail
                        if (detail.nickname) {
                            nickname = detail.nickname
                        }
                        if (detail.portrait) {
                            layui.$('#portrait_s').attr('src', detail.portrait);
                        }
                    }
                    $('#nickname').html(nickname)
                }
            }
        });


        // 搜索联想词
        $('.search-input').keyup(function () {
            if ($('.search-input').val()) {
                $.get("/merchandise/category/search/", {'q': $('.search-input').val()}, function (data) {
                    let category_list = data.data
                    if (category_list) {
                        let str = ``
                        $.each(category_list, function (i, category) {
                            str += `<li><a href="/static/page/merchandise/search.html?q=${category._source.name}" target="_blank">${category.highlight.name[0]}</a></li>`
                        })
                        $('.search-item').html(str)
                    }
                })
            } else {
                $('.search-item').html('')
            }
        })

        function search() {
            window.open(`/static/page/merchandise/search.html?q=${$('.search-input').val()}`, '_blank')
        }

        // 点击搜索
        $('.search-btn').click(search)

        // 回车搜索
        $('.search-input').keydown(function (event) {
            if (event.keyCode == 13) {
                search()
            }
        })

        let id = GetQueryString('id')
        if (!id) {
            location.href = '/static/index.html'
        }

        // 获取商品数据
        $.get('/merchandise/by_id', {'id': id}, function (data) {
            data = data.data
            $('#product-title').text(data.title)
            $('#product-subtitle').text(data.subtitle)
        })

        // 获取商品购买选项数据
        $.get('/merchandise/options/by_merchandise', {'id': id}, function (data) {
            // console.log(data)
            let options = data.data
            let content = ``
            $.each(options, function (i, option) {
                merchandise_options[option[0]] = option[1][0]
                if (option[1][0].price) {
                    price_show = option[1][0].price
                    price_id = option[1][0].id
                }
                if (option[1][0].inventory) {
                    inventory_show = option[1][0].inventory
                }

                content += `<li>
                        <span class="product-name">${option[0]}</span>
                        <ul class="options">
                        `
                $.each(option[1], function (x, args) {
                    let cls = ''
                    if (x == 0) {
                        cls = 'class="pitch"'
                    }
                    content += `<li ${cls} id="option${args.id}" onclick="change_option('${option[0]}',${args.id},${args.price},${args.inventory},'${args.options}')">`
                    if (args.img) {
                        content += `<img
                                    src="` + args.img + `"
                                    alt="` + args.options + `"
                                    title="` + args.options + `">`
                    } else {
                        content += args.options
                    }
                    content += `</li>`
                })
                content += `</ul>
                    </li>`
            })
            // console.log(content)
            $('#option-item').html(content)
            $('.product-price').text('￥' + price_show)
            $('.inventory').text(inventory_show)
        })

        //获取商品产品素材图
        $.get('/merchandise/img/by_merchandise', {'id': id, 'type': 0}, function (data) {
            let imgs = data.data
            let content = `<div class="mainImg" id="largePicDiv">
                    <img id="largePic"
                         src="` + imgs[0].src + `"
                         alt="宝贝"/>
                    <div class="zoom_pup" id="move"></div>
                    <div id="detailPic" class="big_pic">
                        <img alt="宝贝"
                             src="` + imgs[0].src + `"/>
                    </div>
                </div>
                <div class="allImg" id="allImg">
                `
            $.each(imgs, function (i, img) {
                content += `<img src="` + img.src + `"
                         alt="宝贝"/>`
            })
            content += `</div>`
            $('#infoimg').html(content)
            $(".allImg img").mouseover(function () {
                $(".allImg img").removeClass("current");
                $(this).addClass("current");
                var src = $(this).attr("src");
                $("#largePic").attr("src", src.replace("_x", "_w"));
                $("#detailPic img").attr("src", src.replace("_x", "_b"));
            });

            $("#largePicDiv").mousemove(function (e) {
                $('.mainImg .zoom_pup').css("opacity", 0.3);
                $('.big_pic').css("display", "block");
                let ev = e || event;
                let mouseX = ev.pageX;
                let mouseY = ev.pageY;
                let picLeft = $("#largePic").offset().left;
                let picTop = $("#largePic").offset().top;
                let picWidth = $("#largePic").width();
                let picHeight = $("#largePic").height();
                let xLength = mouseX - picLeft;
                let yLength = mouseY - picTop;
                let qWidth = picWidth / 4;
                let lastQWidth = picWidth - picWidth / 4;
                let qHeight = picHeight / 4;
                let lastQHeight = picHeight - picHeight / 4;
                if (xLength < qWidth) {
                    $("#move").css("left", "0px");
                } else {
                    if (xLength > lastQWidth) {
                        $("#move").css("left", (lastQWidth - qWidth) + "px");
                    } else {
                        $("#move").css("left", (xLength - qWidth) + "px");
                    }
                }
                if (yLength < qHeight) {
                    $("#move").css("top", "0px");
                } else {
                    if (yLength > lastQHeight) {
                        $("#move").css("top", (lastQHeight - qHeight) + "px");
                    } else {
                        $("#move").css("top", (yLength - qHeight) + "px");
                    }
                }
                $("#detailPic > img").css("left", parseInt($("#move").css("left")) * (-800 / picWidth) + "px").css("top", parseInt($("#move").css("top")) * (-800 / picWidth) + "px").css("position", "absolute");
            }).mouseout(function () {
                $('.big_pic').css("display", "none");
                $('.mainImg .zoom_pup').css("opacity", 0);
            })
        })

        // 获取商品详情素材图
        $.get('/merchandise/img/by_merchandise', {'id': id, 'type': 1}, function (data) {
            let imgs = data.data
            let content = ``
            $.each(imgs, function (i, img) {
                content += `<img src="` + img.src + `"
                         alt="宝贝"/>`
            })
            $('#detail-img').html(content)
        })
        // 立即购物
        $('.shopping-btn').click(function () {
            let subject = $('#product-title').text() + '。|'
            for (let n in merchandise_options) {
                subject += `${n}:${merchandise_options[n].options}。|`
            }
            let authorization = localStorage.getItem('Authorization')
            if (!authorization) {
                layer.msg('未登录，即将打开登录页面，请登录', {icon: 5})
                setTimeout(function () {
                    window.open('/static/page/user/login.html')
                }, 1000)
                return false
            }
            // console.log(subject)
            $('.by-num').val()
            $.ajax({
                type: "POST",
                url: '/order/ali_pay/',
                headers: {
                    'Authorization': localStorage.getItem('Authorization')
                },
                data: {
                    'id': id,
                    'option_id': price_id,
                    'subject': subject
                },
                success: function (data) {
                    console.log(data)
                    if (data.code == 200) {
                        window.open(data.data)
                    } else if (data.code == 4002) {
                        layer.msg('未登录，即将打开登录页面，请登录', {icon: 5})
                        setTimeout(function () {
                            window.open('/static/page/user/login.html')
                        }, 1000)
                    } else {
                        layer.msg('异常终止', {icon: 5})
                    }
                }
            });
        })
    });
</script>
</body>
</html>